```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Browser-Use | 为开发人员提供的浏览器自动化工具</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', 'Noto Serif SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #f8fafc;
            color: #334155;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .step-number {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            margin-right: 16px;
            flex-shrink: 0;
        }
        .dropdown-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }
        .dropdown.open .dropdown-content {
            max-height: 1000px;
        }
        .mermaid {
            background-color: white;
            border-radius: 0.5rem;
            padding: 1.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body class="antialiased">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-sm sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <span class="text-xl font-bold text-indigo-600 flex items-center">
                        <i class="fas fa-window-maximize mr-2"></i> Browser-Use
                    </span>
                </div>
                <div class="hidden md:flex items-center space-x-8">
                    <a href="#features" class="text-gray-700 hover:text-indigo-600 transition-colors">核心功能</a>
                    <a href="#installation" class="text-gray-700 hover:text-indigo-600 transition-colors">安装指南</a>
                    <a href="#visualization" class="text-gray-700 hover:text-indigo-600 transition-colors">功能图解</a>
                    <a href="https://browser-use.com" target="_blank" class="text-gray-700 hover:text-indigo-600 transition-colors">官网</a>
                </div>
                <div class="md:hidden flex items-center">
                    <button id="mobile-menu-button" class="text-gray-700">
                        <i class="fas fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
            <!-- 移动端菜单 -->
            <div id="mobile-menu" class="hidden md:hidden pb-4">
                <a href="#features" class="block px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-md">核心功能</a>
                <a href="#installation" class="block px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-md">安装指南</a>
                <a href="#visualization" class="block px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-md">功能图解</a>
                <a href="https://browser-use.com" target="_blank" class="block px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-md">官网</a>
            </div>
        </div>
    </nav>

    <!-- Hero 模块 -->
    <section class="hero-gradient text-white py-20">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">Browser-Use</h1>
                    <p class="text-xl md:text-2xl font-light mb-8">为开发人员提供的强大浏览器自动化工具集</p>
                    <p class="text-lg opacity-90 mb-10">简化与浏览器的交互、自动化网页操作，提高跨浏览器开发效率。通过现代浏览器功能，构建更加智能和高效的Web应用程序和自动化工作流。</p>
                    <div class="flex space-x-4">
                        <a href="#installation" class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition-all shadow-md">开始使用</a>
                        <a href="https://browser-use.com" target="_blank" class="border-2 border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:bg-opacity-10 transition-all">访问官网</a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1745761944317-3a892ed6-beda-4f45-a390-f3a5970a39a2.png" alt="Browser-Use界面截图" class="rounded-xl shadow-2xl border-4 border-white border-opacity-20 max-w-full h-auto">
                </div>
            </div>
        </div>
    </section>

    <!-- 核心功能 -->
    <section id="features" class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">核心功能概述</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">Browser-Use 提供了多种实用功能，帮助开发人员高效完成浏览器自动化任务</p>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="feature-card bg-white p-6 rounded-xl shadow-md border border-gray-100 transition-all duration-300">
                    <div class="text-indigo-600 mb-4">
                        <i class="fas fa-robot text-4xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">浏览器自动化</h3>
                    <p class="text-gray-600">控制浏览器执行各种操作，如页面导航、表单填充、截图等，实现复杂的自动化流程。</p>
                </div>
                
                <div class="feature-card bg-white p-6 rounded-xl shadow-md border border-gray-100 transition-all duration-300">
                    <div class="text-indigo-600 mb-4">
                        <i class="fas fa-mouse-pointer text-4xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">元素交互</h3>
                    <p class="text-gray-600">精确定位和操作网页元素，模拟真实的用户交互行为，支持各种选择器和操作方式。</p>
                </div>
                
                <div class="feature-card bg-white p-6 rounded-xl shadow-md border border-gray-100 transition-all duration-300">
                    <div class="text-indigo-600 mb-4">
                        <i class="fas fa-database text-4xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">数据提取</h3>
                    <p class="text-gray-600">从网页中获取结构化数据，支持复杂的CSS和XPath选择器，轻松抓取所需信息。</p>
                </div>
                
                <div class="feature-card bg-white p-6 rounded-xl shadow-md border border-gray-100 transition-all duration-300">
                    <div class="text-indigo-600 mb-4">
                        <i class="fas fa-bell text-4xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">事件监听</h3>
                    <p class="text-gray-600">捕获和响应浏览器事件，实时监控页面变化，及时做出反应和处理。</p>
                </div>
                
                <div class="feature-card bg-white p-6 rounded-xl shadow-md border border-gray-100 transition-all duration-300">
                    <div class="text-indigo-600 mb-4">
                        <i class="fas fa-window-restore text-4xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">跨浏览器兼容性</h3>
                    <p class="text-gray-600">支持多种主流浏览器，确保您的自动化脚本在不同环境下都能稳定运行。</p>
                </div>
                
                <div class="feature-card bg-white p-6 rounded-xl shadow-md border border-gray-100 transition-all duration-300">
                    <div class="text-indigo-600 mb-4">
                        <i class="fas fa-puzzle-piece text-4xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">扩展集成</h3>
                    <p class="text-gray-600">与浏览器扩展程序协同工作，扩展功能边界，实现更复杂的自动化场景。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 安装指南 -->
    <section id="installation" class="py-16 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">Browser-Use Web UI 本地搭建</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">按照以下步骤轻松搭建本地开发环境，开始您的浏览器自动化之旅</p>
            </div>
            
            <!-- 前提条件 -->
            <div class="bg-white p-6 rounded-xl shadow-md mb-12">
                <h3 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                    <i class="fas fa-clipboard-check text-indigo-600 mr-3"></i> 前提条件
                </h3>
                <p class="text-gray-700 mb-4">在开始之前，请确保您的系统满足以下要求：</p>
                <ul class="list-disc pl-6 space-y-2 text-gray-600">
                    <li>Python 3.11 或更高版本</li>
                    <li>Git（用于克隆代码库）</li>
                    <li>稳定的网络连接（用于下载依赖项）</li>
                </ul>
            </div>
            
            <!-- 详细步骤 -->
            <div class="space-y-8">
                <div class="bg-white p-6 rounded-xl shadow-md">
                    <div class="flex items-center mb-4 cursor-pointer dropdown-toggle" onclick="toggleDropdown(this)">
                        <div class="step-number bg-indigo-100 text-indigo-700 font-bold">1</div>
                        <h3 class="text-xl font-bold text-gray-900">克隆代码库</h3>
                        <i class="fas fa-chevron-down ml-auto transition-transform"></i>
                    </div>
                    <div class="dropdown-content pl-12">
                        <p class="text-gray-700 mb-4">首先，打开终端或命令提示符，运行以下命令来克隆代码库并进入项目目录：</p>
                        <div class="bg-gray-800 text-gray-100 p-4 rounded-lg font-mono overflow-x-auto">
                            <code>git clone https://github.com/browser-use/web-ui.git<br>cd web-ui</code>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-md">
                    <div class="flex items-center mb-4 cursor-pointer dropdown-toggle" onclick="toggleDropdown(this)">
                        <div class="step-number bg-indigo-100 text-indigo-700 font-bold">2</div>
                        <h3 class="text-xl font-bold text-gray-900">设置 Python 虚拟环境</h3>
                        <i class="fas fa-chevron-down ml-auto transition-transform"></i>
                    </div>
                    <div class="dropdown-content pl-12">
                        <p class="text-gray-700 mb-4">为避免与系统 Python 包冲突，我们将创建一个虚拟环境。推荐使用 uv 工具进行环境管理。</p>
                        
                        <h4 class="font-bold text-gray-800 mt-6 mb-2">安装 uv（如果尚未安装）</h4>
                        <p class="text-gray-700 mb-4">在某些系统上，您可能需要先安装 uv：</p>
                        <div class="bg-gray-800 text-gray-100 p-4 rounded-lg font-mono overflow-x-auto mb-6">
                            <code>pip install uv</code>
                        </div>
                        
                        <h4 class="font-bold text-gray-800 mt-6 mb-2">创建虚拟环境</h4>
                        <p class="text-gray-700 mb-4">使用 uv 创建虚拟环境：</p>
                        <div class="bg-gray-800 text-gray-100 p-4 rounded-lg font-mono overflow-x-auto mb-6">
                            <code>uv venv --python 3.11</code>
                        </div>
                        
                        <h4 class="font-bold text-gray-800 mt-6 mb-2">激活虚拟环境</h4>
                        <p class="text-gray-700 mb-4">根据您的操作系统，使用以下命令之一激活虚拟环境：</p>
                        
                        <h5 class="font-semibold text-gray-800 mt-4 mb-2">Windows (命令提示符):</h5>
                        <div class="bg-gray-800 text-gray-100 p-4 rounded-lg font-mono overflow-x-auto mb-4">
                            <code>.venv\Scripts\activate</code>
                        </div>
                        
                        <h5 class="font-semibold text-gray-800 mt-4 mb-2">Windows (PowerShell):</h5>
                        <div class="bg-gray-800 text-gray-100 p-4 rounded-lg font-mono overflow-x-auto mb-4">
                            <code>.\.venv\Scripts\Activate.ps1</code>
                        </div>
                        
                        <h5 class="font-semibold text-gray-800 mt-4 mb-2">macOS/Linux:</h5>
                        <div class="bg-gray-800 text-gray-100 p-4 rounded-lg font-mono overflow-x-auto">
                            <code>source .venv/bin/activate</code>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-md">
                    <div class="flex items-center mb-4 cursor-pointer dropdown-toggle" onclick="toggleDropdown(this)">
                        <div class="step-number bg-indigo-100 text-indigo-700 font-bold">3</div>
                        <h3 class="text-xl font-bold text-gray-900">安装依赖项</h3>
                        <i class="fas fa-chevron-down ml-auto transition-transform"></i>
                    </div>
                    <div class="dropdown-content pl-12">
                        <p class="text-gray-700 mb-4">在激活的虚拟环境中，安装所需的 Python 包：</p>
                        <div class="bg-gray-800 text-gray-100 p-4 rounded-lg font-mono overflow-x-auto mb-6">
                            <code>uv pip install -r requirements.txt</code>
                        </div>
                        
                        <h4 class="font-bold text-gray-800 mt-6 mb-2">安装 Playwright 浏览器</h4>
                        <p class="text-gray-700 mb-4">Browser-Use 需要 Playwright 来控制浏览器。安装 Playwright 的 Chromium 浏览器：</p>
                        <div class="bg-gray-800 text-gray-100 p-4 rounded-lg font-mono overflow-x-auto mb-4">
                            <code>playwright install --with-deps chromium</code>
                        </div>
                        <p class="text-gray-700 mb-4">如果您希望安装所有支持的浏览器（Chromium、Firefox 和 WebKit），请运行：</p>
                        <div class="bg-gray-800 text-gray-100 p-4 rounded-lg font-mono overflow-x-auto">
                            <code>playwright install</code>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-md">
                    <div class="flex items-center mb-4 cursor-pointer dropdown-toggle" onclick="toggleDropdown(this)">
                        <div class="step-number bg-indigo-100 text-indigo-700 font-bold">4</div>
                        <h3 class="text-xl font-bold text-gray-900">配置环境变量</h3>
                        <i class="fas fa-chevron-down ml-auto transition-transform"></i>
                    </div>
                    <div class="dropdown-content pl-12">
                        <p class="text-gray-700 mb-4">1. 复制示例环境文件，创建您自己的配置：</p>
                        
                        <h5 class="font-semibold text-gray-800 mt-4 mb-2">Windows (命令提示符):</h5>
                        <div class="bg-gray-800 text-gray-100 p-4 rounded-lg font-mono overflow-x-auto mb-4">
                            <code>copy .env.example .env</code>
                        </div>
                        
                        <h5 class="font-semibold text-gray-800 mt-4 mb-2">macOS/Linux/Windows (PowerShell):</h5>
                        <div class="bg-gray-800 text-gray-100 p-4 rounded-lg font-mono overflow-x-auto mb-6">
                            <code>cp .env.example .env</code>
                        </div>
                        
                        <p class="text-gray-700 mb-4">2. 使用文本编辑器打开 <code class="bg-gray-200 px-1 py-0.5 rounded">.env</code> 文件，添加您的 API 密钥和其他设置：</p>
                        <div class="bg-gray-800 text-gray-100 p-4 rounded-lg font-mono overflow-x-auto">
                            <code># LLM API 密钥<br>OPENAI_API_KEY=your_openai_key_here<br>ANTHROPIC_API_KEY=your_anthropic_key_here<br>GOOGLE_API_KEY=your_google_key_here<br><br># 浏览器设置<br># 设置为 true 可在 AI 任务之间保持浏览器打开状态<br>CHROME_PERSISTENT_SESSION=false<br><br># 如果要使用自己的浏览器，请设置以下路径<br># Windows 示例<br># CHROME_PATH="C:\Program Files\Google\Chrome\Application\chrome.exe"<br># CHROME_USER_DATA="C:\Users\YourUsername\AppData\Local\Google\Chrome\User Data"<br><br># Mac 示例<br># CHROME_PATH="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"<br># CHROME_USER_DATA="/Users/YourUsername/Library/Application Support/Google/Chrome"<br><br># 如果使用自己的浏览器，请将 CHROME_USER_DATA 留空以使用本地用户数据</code>
                        </div>
                        <p class="text-gray-700 mt-4">API_KEY可以从OpenRouter中获取：<a href="https://www.yuque.com/jtostring/qiwsg9/xkyag80d9gr3ii4y" target="_blank" class="text-indigo-600 hover:underline">OpenRouter开发者的多模型 AI 接入平台</a></p>
                    </div>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-md">
                    <div class="flex items-center mb-4 cursor-pointer dropdown-toggle" onclick="toggleDropdown(this)">
                        <div class="step-number bg-indigo-100 text-indigo-700 font-bold">5</div>
                        <h3 class="text-xl font-bold text-gray-900">启动 Web UI</h3>
                        <i class="fas fa-chevron-down ml-auto transition-transform"></i>
                    </div>
                    <div class="dropdown-content pl-12">
                        <p class="text-gray-700 mb-4">现在您已经完成了所有设置，可以启动 WebUI：</p>
                        <div class="bg-gray-800 text-gray-100 p-4 rounded-lg font-mono overflow-x-auto mb-6">
                            <code>python webui.py --ip 127.0.0.1 --port 7788</code>
                        </div>
                        
                        <h4 class="font-bold text-gray-800 mt-6 mb-2">可用的启动选项：</h4>
                        <ul class="list-disc pl-6 space-y-2 text-gray-600">
                            <li><code class="bg-gray-200 px-1 py-0.5 rounded">--ip</code>：WebUI 绑定的 IP 地址，默认为 <code class="bg-gray-200 px-1 py-0.5 rounded">127.0.0.1</code>（仅本地访问）</li>
                            <li><code class="bg-gray-200 px-1 py-0.5 rounded">--port</code>：WebUI 绑定的端口，默认为 <code class="bg-gray-200 px-1 py-0.5 rounded">7788</code></li>
                            <li><code class="bg-gray-200 px-1 py-0.5 rounded">--theme</code>：用户界面主题，默认为 <code class="bg-gray-200 px-1 py-0.5 rounded">Ocean</code>
                                <ul class="list-disc pl-6 mt-2 space-y-1">
                                    <li>可选主题：<code class="bg-gray-200 px-1 py-0.5 rounded">Default</code>, <code class="bg-gray-200 px-1 py-0.5 rounded">Soft</code>, <code class="bg-gray-200 px-1 py-0.5 rounded">Monochrome</code>, <code class="bg-gray-200 px-1 py-0.5 rounded">Glass</code>, <code class="bg-gray-200 px-1 py-0.5 rounded">Origin</code>, <code class="bg-gray-200 px-1 py-0.5 rounded">Citrus</code>, <code class="bg-gray-200 px-1 py-0.5 rounded">Ocean</code></li>
                                </ul>
                            </li>
                            <li><code class="bg-gray-200 px-1 py-0.5 rounded">--dark-mode</code>：启用暗色模式</li>
                        </ul>
                        
                        <p class="text-gray-700 mt-6">例如，如果您想使用暗色模式和 Glass 主题，可以运行：</p>
                        <div class="bg-gray-800 text-gray-100 p-4 rounded-lg font-mono overflow-x-auto">
                            <code>python webui.py --dark-mode --theme Glass</code>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-md">
                    <div class="flex items-center mb-4 cursor-pointer dropdown-toggle" onclick="toggleDropdown(this)">
                        <div class="step-number bg-indigo-100 text-indigo-700 font-bold">6</div>
                        <h3 class="text-xl font-bold text-gray-900">访问 Web 界面</h3>
                        <i class="fas fa-chevron-down ml-auto transition-transform"></i>
                    </div>
                    <div class="dropdown-content pl-12">
                        <p class="text-gray-700 mb-4">启动后，在您的网络浏览器中访问：</p>
                        <div class="bg-gray-800 text-gray-100 p-4 rounded-lg font-mono overflow-x-auto mb-6">
                            <code>http://127.0.0.1:7788</code>
                        </div>
                        <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1745761944317-3a892ed6-beda-4f45-a390-f3a5970a39a2.png" alt="Web UI界面" class="rounded-lg shadow-md border border-gray-200 max-w-full h-auto">
                    </div>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-md">
                    <div class="flex items-center mb-4 cursor-pointer dropdown-toggle" onclick="toggleDropdown(this)">
                        <div class="step-number bg-indigo-100 text-indigo-700 font-bold">7</div>
                        <h3 class="text-xl font-bold text-gray-900">输入提示词</h3>
                        <i class="fas fa-chevron-down ml-auto transition-transform"></i>
                    </div>
                    <div class="dropdown-content pl-12">
                        <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1745762421801-bd6b875f-e9ae-47d7-bbec-10a94e72b080.png" alt="提示词输入界面" class="rounded-lg shadow-md border border-gray-200 max-w-full h-auto mb-4">
                        <img src="https://cdn.nlark.com/yuque/0/2025/gif/21449790/1745762630000-300c5ef4-c7b8-42f8-80b9-24630fbff069.gif" alt="操作演示" class="rounded-lg shadow-md border border-gray-200 max-w-full h-auto">
                    </div>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-md">
                    <div class="flex items-center mb-4 cursor-pointer dropdown-toggle" onclick="toggleDropdown(this)">
                        <div class="step-number bg-indigo-100 text-indigo-700 font-bold">8</div>
                        <h3 class="text-xl font-bold text-gray-900">使用自己的浏览器（可选）</h3>
                        <i class="fas fa-chevron-down ml-auto transition-transform"></i>
                    </div>
                    <div class="dropdown-content pl-12">
                        <p class="text-gray-700 mb-4">如果您想使用自己的 Chrome 浏览器（而不是 Playwright 安装的浏览器），请按照以下步骤操作：</p>
                        <ol class="list-decimal pl-6 space-y-2 text-gray-600">
                            <li>在 <code class="bg-gray-200 px-1 py-0.5 rounded">.env</code> 文件中配置以下设置：
                                <ul class="list-disc pl-6 mt-2 space-y-1">
                                    <li><code class="bg-gray-200 px-1 py-0.5 rounded">CHROME_PATH</code>：指向您的 Chrome 可执行文件路径</li>
                                    <li><code class="bg-gray-200 px-1 py-0.5 rounded">CHROME_USER_DATA</code>：指向您的 Chrome 用户数据目录（如果要使用现有的浏览器配置文件）</li>
                                </ul>
                            </li>
                            <li>关闭所有正在运行的 Chrome 窗口</li>
                            <li>使用非 Chrome 浏览器（如 Firefox 或 Edge）打开 WebUI</li>
                            <li>在 WebUI 的"Browser Settings"中勾选"Use Own Browser"选项</li>
                        </ol>
                    </div>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-md">
                    <div class="flex items-center mb-4 cursor-pointer dropdown-toggle" onclick="toggleDropdown(this)">
                        <div class="step-number bg-indigo-100 text-indigo-700 font-bold">9</div>
                        <h3 class="text-xl font-bold text-gray-900">保持浏览器打开（可选）</h3>
                        <i class="fas fa-chevron-down ml-auto transition-transform"></i>
                    </div>
                    <div class="dropdown-content pl-12">
                        <p class="text-gray-700 mb-4">如果您希望在 AI 任务之间保持浏览器打开状态（以维持历史记录和状态），请在 <code class="bg-gray-200 px-1 py-0.5 rounded">.env</code> 文件中设置：</p>
                        <div class="bg-gray-800 text-gray-100 p-4 rounded-lg font-mono overflow-x-auto">
                            <code>CHROME_PERSISTENT_SESSION=true</code>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 可视化图表 -->
    <section id="visualization" class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">Browser-Use 功能架构图解</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">通过图表直观了解 Browser-Use 的核心组件及其相互关系</p>
            </div>
            
            <div class="bg-gray-50 p-4 rounded-xl">
                <div class="mermaid">
                    graph TD
                    A[Browser-Use] --> B[浏览器自动化]
                    A --> C[元素交互]
                    A --> D[数据提取]
                    A --> E[事件监听]
                    A --> F[跨浏览器兼容]
                    A --> G[扩展集成]
                    
                    B --> B1[页面导航]
                    B --> B2[表单填充]
                    B --> B3[截图]
                    B --> B4[模拟用户操作]
                    
                    C --> C1[元素定位]
                    C --> C2[点击/输入]
                    C --> C3[滚动]
                    C --> C4[拖放]
                    
                    D --> D1[HTML解析]
                    D --> D2[CSS选择器]
                    D --> D3[XPath]
                    D --> D4[正则表达式]
                    
                    E --> E1[页面加载]
                    E --> E2[网络请求]
                    E --> E3[DOM变更]
                    E --> E4[用户交互]
                    
                    F --> F1[Chromium]
                    F --> F2[Firefox]
                    F --> F3[WebKit]
                    
                    G --> G1[扩展API]
                    G --> G2[消息传递]
                    G --> G3[后台脚本]
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-gray-900 text-gray-300 py-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <span class="text-xl font-bold text-white">Java技术小馆</span>
                </div>
                <div>
                    <a href="http://www.yuque.com/jtostring" target="_blank" class="text-gray-300 hover:text-white transition-colors">
                        <i class="fas fa-link mr-2"></i>http://www.yuque.com/jtostring
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // 初始化Mermaid图表
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // 移动端菜单切换
        document.getElementById('mobile-menu-button').addEventListener('click', function() {
            const menu = document.getElementById('mobile-menu');
            if (menu.classList.contains('hidden')) {
                menu.classList.remove('hidden');
            } else {
                menu.classList.add('hidden');
            }
        });
        
        // 下拉内容切换
        function toggleDropdown(element) {
            const dropdown = element.closest('.dropdown-toggle').parentElement;
            if (dropdown.classList.contains('dropdown')) {
                dropdown.classList.toggle('open');
            } else {
                dropdown.classList.add('dropdown', 'open');
            }
            const icon = element.querySelector('i.fa-chevron-down');
            if (icon) {
                icon.classList.toggle('rotate-180');
            }
        }
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    targetElement.scrollIntoView({
                        behavior: 'smooth'
                    });
                    
                    // 关闭移动端菜单
                    const mobileMenu = document.getElementById('mobile-menu');
                    if (!mobileMenu.classList.contains('hidden')) {
                        mobileMenu.classList.add('hidden');
                    }
                }
            });
        });
    </script>
</body>
</html>
```